<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>My first HTML document</title>
	  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
	  <script type="text/javascript">
	  
	    var pos = 0;
      var max_pos = 0;
       
      function scrollitleft(){
          if(pos+90>=max_pos) return;
          else {
            pos += 90;
            $("#thumbs").animate({"left": "-=90px"}, "slow", "linear", scrollitleft);
          }        
          
      }
      
      function scrollitright(){   
          if(pos-90<=0) return;
          else {
            pos -= 90;
            $("#thumbs").animate({"left": "+=90px"}, "slow", "linear", scrollitright);
          }    
          
      }
            
      $(document).ready(function(){
         
        $('#slideright').hover(function(){
           $("#thumbs").stop(); 
           scrollitleft(); 
        }, function(){ 
           $("#thumbs").stop(); 
        });
        
        $('#slideleft').mouseenter(function(){
          $("#thumbs").stop(); 
          scrollitright();
        }).mouseleave(function(){
          $("#thumbs").stop(); 
        });
        
        $("#thumbs a img").each(function(){
          max_pos++;
        });
        
        max_pos *= 90; 
        
      }); 
    </script>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
    
    
    <div id="container">
      <div id="header">
        <h1>Matej Baćo</h1>
    	</div>	
 
    		<ul id="main_menu">
    			<li><a href="#" title="Link">Biografija</a>
            <ul class="sub_menu">
              <li><a href="#" title="Link">Landscape</a></li>
              <li class="current"><a href="#" title="Link">Fashion</a></li>
              <li><a href="#" title="Link">Macro</a></li>
            </ul>
          </li>
    			<li class="current"><a href="#"title="Link">Portfolio</a>
            <ul class="sub_menu">
              <li><a href="#" title="Link">Landscape 2</a></li>
              <li class="current"><a href="#" title="Link">Fashion 2</a></li>
              <li><a href="#" title="Link">Macro 2</a></li>
            </ul>
          </li>
    			<li><a href="#" title="Link">Kontakt</a>
            <ul class="sub_menu">
              <li><a href="#" title="Link">Landscape 3</a></li>
              <li class="current"><a href="#" title="Link">Fashion 3</a></li>
              <li><a href="#" title="Link">Macro 3</a></li>
            </ul>
          </li>
    			<li><a href="#" title="Link">Link 4</a>
            <ul class="sub_menu">
              <li><a href="#" title="Link">Landscape 4</a></li>
              <li class="current"><a href="#" title="Link">Fashion 4</a></li>
              <li><a href="#" title="Link">Macro 4</a></li>
            </ul>
          </li>
    		</ul>
    		<div id="sub_menu_line"></div>
 
  	   
  	    
    	</div>
      
      <div id="footer">
    	  <div id="slideleft"><img src="images/arrow_left.png" style="float: left;" /></div>
    	  <div id="thumbs">
    	     <a href="" id="first"><img src="images/test1.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href=""><img src="images/test.jpg" /></a>
    	     <a href="" id="last"><img src="images/test2.jpg" /></a>
    	  </div>
    	  <div id="slideright"><img src="images/arrow_right.png" style="float: right;" /></div>
    	  
    	  <div id="copy">
          <h3>Copyright by Matej Baćo</h3>
      	  <h3 id="poweredby">Powered by Blic</h3>
    	  </div>
    	  
      </div>
   </body>
</html>